<!doctype html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.3.1/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/message.min.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./js/message.min.js"></script>
    <title>消息弹窗</title>
</head>
<style type="text/css">

    html,body{
        height: 100%;
    }

    body{
        font-family: Avenir,Helvetica,Arial,sans-serif;
        font-size: 0.95rem;
        line-height: 1.8;
        color: #555;
        overflow: hidden;
        background: #f9f9f9;
    }

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

</style>

<div id="panel" style="display: none">

    中间
    <br>
    使用 panel
    <br>
    更多使用 方式请阅读 ./js/message.js
    <br>
    icon 使用 font-awesome 5.3.1
    <br>
    <strong>./js/message.js</strong> js 源码 <br>
    <strong>./less/message.less</strong> css 源码 <br>

</div>

<body>

<script>

    $(function () {

        // 也可
        // VtMessage.error('错误');

        VtMessage.error({
            duration: 0,
            content: '左上',
            offset: 'vt-left-top vt-fixed',
        });
        VtMessage.info({
            duration: 0,
            content: '中上',
            offset: 'vt-top-center vt-fixed'
        });
        VtMessage.success({
            duration: 0,
            content: '右上',
            offset: 'vt-right-top vt-fixed'
        });

        VtMessage.warning({
            duration: 0,
            content: '左中',
            offset: 'vt-left-center vt-fixed'
        });


        VtMessage.panel({
            content: $('#panel').html(),
            offset: 'vt-center-center',
            title: '标题',
            footer: true,
            style: {
                minWidth: 400
            },
        });

        VtMessage.error({
            content: '右中',
            offset: 'vt-right-center',
            duration: 0,
        });

        VtMessage.info({
            content: '左下',
            offset: 'vt-left-bottom',
            duration: 0,
        });
        VtMessage.success({
            content: '中下',
            offset: 'vt-bottom-center',
            duration: 0,
        });
        VtMessage.warning({
            content: '右下',
            offset: 'vt-right-bottom',
            duration: 0,
        });
    });

</script>



</body>
</html>